【 Ajax 】之异步交互

头像
佐珥玎
    阅读 5 分钟
    3

    Ajax

    1.同步交互与异步交互

    同步交互；就是发送个请求到服务器端，等待返回，然后再发送下个请求
    异步交互；就是发送个请求到服务器端，无需等待返回，直接发送下个请求，不过呢，可能会等待上个请求

    2.Ajax是什么

    关于HTML页面中能够快速加载到界面病展示个用户，不需要再次加载页面
    实现Ajax步骤

    <body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.open('get','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);

        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4){
               console.log(xhr.responseText);

            }
        }
    });
</script>
</body>

    3.实现Ajax异步交互

    创建XMLHttpRequest对象
    调用XMLHttpRequest对象open()方法
    调用XMLHttpRequest对象send()方法
    利用XMLHttpRequest对象onreadystatechange事件

    readySate属性

    <body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (){
        var xhr = createXMLHttpRequest();
//        创建XMLHttpRequest对象
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4){
               console.log(xhr.status);
               if (xhr.status === 200){
                   console.log(responseText);
               }
            }
        }
        xhr.open('get','http://localhost:63342/code/%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);
    })
</script>
</body>

    4.GET与POST请求方式

    GET；创建的请求数据增加到open()方法的url地址中
    将发送请求数据的send()方法参数为null值
    POST；需要通过XMLHttpRequest对象的setRequestHeader()方法设置请求信息
    通过XMLHttpRequest对象的send()发送请求数据

    <body>

<form action="#" enctype="application/x-www-form-urlencoded">
    <input type="text" id="user" name="user">
    <input type="text" id="pwd" name="pwd">
    <input type="submit">
</form>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');

    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        // 创建XMLHttpRequest对象
        xhr.onreadystatechange = function () {// 监听服务器端的通信状态
            if(xhr.readyState === 4){
                console.log(xhr.status);
                if (xhr.status === 200){
                    console.log(xhr.responseText);
                }
            }
        }
        xhr.open('post','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html?user=zhangwuji&pwd=123456');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 设置请求头部信息
        xhr.send('user=zhangwuji&pwd=123456');
    });
</script>
</body>

    JSON数据格式

    1.JavaScript中的JSON

    <body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
//    JSON字符串-该格式符合JSON格式要求，类型就是字符串的类型
    var jsonObject = {
        name : '犬夜叉'
    }
    var jsonArr = [1,2,3,4];
//    JSON对象-该JSON模式在JavaScript中具体表现只有对象与数组
</script>
</body>

    2.JSON字符串与JSON对象

        <script src="js/json2.js"></script>
</head>
<body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
    var jsonResult = JSON.stringify(jsonObject);
    console.log(jsonResult);
//    JSON字符串
</script>
</body>

    Ajax中的JSON

    <body>
<button id="qyc">提交</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function(){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 接收数据 - JSON数据格式，是字符串类型
                var data = xhr.responseText;
                // 将符合JSON格式的字符串类型数据进行转换
                var json = JSON.parse(data);
                // 进行具体处理
                console.log(json);
            }
        }

        // 请求数据格式 - user=zhangwuji&pwd=12345
        xhr.open('post','server.json');

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        var obj = {
            name : '犬夜叉',
            age : 16
        }
        // 将JSON字符串转换成符合请求数据的格式
        xhr.send('name=' + obj.name + '&age=' + obj.age);
    });

</script>
</body>

    Ajax中的XML

    <body>
<button id="qyc">按钮</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200){
                var data = xhr.responseXML;
                //接收数据-responseXML属性-接收XML数据格式
                var nameElement = data.getElementsByTagName('name')[0];
                // 利用DOM解析XML
                console.log(nameElement.textContent);
            }
            xhr.open('post','server.xml');
            xhr.snd(null);
        }
    });
</script>
</body>
    ajax
    佐珥玎
    41 声望8 粉丝
    « 上一篇
    【jQuery】之工具与插件的运用
    下一篇 »
    【Ajax】之jQuery中的Ajax

    引用和评论

    推荐阅读
    头像
    【Ajax】之jQuery中的Ajax

    佐珥玎阅读 1.4k

    头像
    第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）

    刘大猫阅读 274

    头像
    回顾前端页面发送ajax请求方式

    刘大猫阅读 207

    0 条评论
    得票最新